import React from 'react';
import { Table, Select, Button ,Space} from 'antd';
const TopologyConfig = ({
  data,
  clusterData,
  moduleData,
  onAdd,
  onDelete,
  onConfigChange
}) => {
  const handleClusterChange = (index, field, value) => {
    const newData = [...data];
    newData[index][field] = value;
    // 重置相关联的模块选择
    if (field.includes('caller')) newData[index].callerModule = '';
    if (field.includes('callee')) newData[index].calleeModule = '';
    onConfigChange(newData);
  };

  const handleModuleChange = (index, field, value) => {
    const newData = [...data];
    newData[index][field] = value;
    onConfigChange(newData);
  };
  // 上移
  const handleMoveUp = (index) => {
    if (index === 0) return;
    const newData = [...data];
    [newData[index], newData[index - 1]] = [newData[index - 1], newData[index]];
    onConfigChange(newData);
  };

  // 下移
  const handleMoveDown = (index) => {
    if (index === data.length - 1) return;
    const newData = [...data];
    [newData[index], newData[index + 1]] = [newData[index + 1], newData[index]];
    onConfigChange(newData);
  };
  const columns = [
    {
      title: '调用方集群',
      dataIndex: 'callerCluster',
      render: (text, record, index) => (
        <Select
          style={{ width: 120 }}
          placeholder="选择集群"
          value={text}
          onChange={(val) => handleClusterChange(index, 'callerCluster', val)}
          filterOption={(input, option) =>
            (option?.children ?? '').toLowerCase().includes(input.toLowerCase())
          }
        >
          {clusterData.map(cluster => (
            <Select.Option key={cluster.id} value={cluster.id}>{cluster.name}</Select.Option>
          ))}
        </Select>
      ),
    },
    {
      title: '调用方模块',
      dataIndex: 'callerModule',
      render: (text, record, index) => (
        <Select
          style={{ width: 180 }}
          placeholder="选择模块"
          value={text}
          onChange={(val) => handleModuleChange(index, 'callerModule', val)}
          disabled={!record.callerCluster}
          filterOption={(input, option) =>
            (option?.children ?? '').toLowerCase().includes(input.toLowerCase())
          }
        >
          {record.callerCluster && moduleData[record.callerCluster]?.map(module => (
            <Select.Option key={module.id} value={module.id}>{module.name}</Select.Option>
          ))}
        </Select>
      ),
    },
    {
      title: '关系',
      render: () => <span>调用</span>,
    },
    {
      title: '被调用方集群',
      dataIndex: 'calleeCluster',
      render: (text, record, index) => (
        <Select
          style={{ width: 120 }}
          placeholder="选择集群"
          value={text}
          onChange={(val) => handleClusterChange(index, 'calleeCluster', val)}
          filterOption={(input, option) =>
            (option?.children ?? '').toLowerCase().includes(input.toLowerCase())
          }
        >
          {clusterData.map(cluster => (
            <Select.Option key={cluster.id} value={cluster.id}>{cluster.name}</Select.Option>
          ))}
        </Select>
      ),
    },
    {
      title: '被调用方模块',
      dataIndex: 'calleeModule',
      render: (text, record, index) => (
        <Select
          style={{ width: 180 }}
          placeholder="选择模块"
          value={text}
          onChange={(val) => handleModuleChange(index, 'calleeModule', val)}
          disabled={!record.calleeCluster}
          filterOption={(input, option) =>
            (option?.children ?? '').toLowerCase().includes(input.toLowerCase())
          }
        >
          {record.calleeCluster && moduleData[record.calleeCluster]?.map(module => (
            <Select.Option key={module.id} value={module.id}>{module.name}</Select.Option>
          ))}
        </Select>
      ),
    },
    {
      title: '操作',
      render: (_, record, index) => (
        <div style={{ display: 'flex', width: 180, height: 32, alignItems: 'center' }}>
        
          <div className="move-down-btn">
            {index === 0 ? (
              <span className='move-down-up'>上移</span>
            ) : (
              <Button
                type="text"
                onClick={() => handleMoveUp(index)}
              >
                上移
              </Button>
            )}
          </div>
          <div className="move-down-btn">
            {index === data.length - 1 ? (
              <span className='move-down-up'>下移</span>
            ) : (
              <Button
                type="text"
                onClick={() => handleMoveDown(index)}
                
              >
                下移
              </Button>
            )}
          </div>
          <div className="move-down-btn">
            <Button
              type="text"
              onClick={() => onDelete(index)}
            >
              删除
            </Button>
          </div>
        </div>
      ),
    },
  ];
  return (
    <div>
      <div style={{ marginBottom: 16, textAlign: 'right' }}>
        <Button type="primary" onClick={onAdd}>添加配置项</Button>
      </div>
      <Table
        dataSource={data}
        columns={columns}
        rowKey="id"
        pagination={false}
        bordered
      />
    </div>
  );
};

export default TopologyConfig;